In "genric-input" we just do setValueSynced(value === newValue). What is the reason that this and other fields need the effect and syncTouched? Could we not calculate this, or set the synced value in the onSuccess-callback? Or should the generic-input also use this way of doing it?

I think it's more correct to do the side effect with useEffect. In the generic input, which is the first one I wrote, this setValueSynced(value === newValue) was working, but in the other components, it does not work, I suppose because the code is executing before the new value has actually been set.

Alright, I just in general try to not use useEffect, and always try to look for other solutions. It adds additional re-renders and complexity. But maybe in this case it's warranted - because we're actually syncing states here.

But I do feel like the need for "syncTouched", "lastSyncedValue", and "setValueSynced" is somewhat complex.
Ideally this is just something we could calculate from mutation state, and potentially the query-cache. But it's hard to argue for such changes when this seems to work great.

This is the logic to check that the values in the zustand store are for the given data form, so as to prevent rendering the input cells before the initial values are present

I found a small (but scary) bug that I think is related to this, but also the service worker somehow.

If you edit a cell - blur and let it save - then refresh. The value will not be shown in the form.
You can also test this with another tab of the same form: if you update the form in one tab, then refresh in another - you won't get the updated data unless you refresh twice.

It seems like the forms initial values are populated with the "offline"-cached version of the values. So I think we need some additional checks for the loading in data-workspace?

We may need to check for "isFetchedAfterMount" on the initialDataValuesFetch query when checking for loading indicator - unless you're offline?

eg:

    if (initialDataValuesFetch.isFetching || (!initialDataValuesFetch.isFetchedAfterMount && !initialDataValuesFetch.isPaused)) {
        return (
            <CenteredContent>
                <CircularLoader />
            </CenteredContent>
        )
    }

😱 thanks for that!

I'm too be honest a little confused with the react-query nomenclature here. I would have thought that since we had refetchOnMount: false for this query that isFetchedAfterMount would remain false, but I guess it's 'isFetchedAfterMountand maybe I'm imaging a variableisRefetchedAfterMount`?

I don't think it matters too much here, but I think normal useEffect should suffice.

Fix exhaustive deps?

🤦‍♂️ sorry for that. I'm impressed(?) with myself for managing to miss multiple lint warnings both locally and in github 😬